<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>对接</cite></a>
        <a><cite>接口文档</cite></a>
    </span>
</div>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title" style="padding-bottom: 20px;">
                <li class="layui-this">商户接口信息</li>
            </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <fieldset class="layui-elem-field">
                    <legend><span class="layui-badge layui-bg-orange">基本信息</span></legend>
                    <div class="layui-field-box">
                        <div class="layui-row">
                            <div class="layui-col-xs6">
                                <div class="grid-demo grid-demo-bg1">
                                    <form class="layui-form">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商户ID:</label>
                                            <div class="layui-input-inline" style="width: 250px">
                                                <input type="text" id="mchId" style="border: none;" disabled autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">秘钥:</label>
                                            <div class="layui-input-inline">
                                                <!--<textarea type="text" id="privateKey" style="border: none;height: 100px;width: 670px" disabled autocomplete="off" class="layui-input"></textarea>-->
                                                <button type="button" style="margin-top: 10px" class="layui-btn layui-btn-normal layui-btn-xs privateKeyView">点击查看秘钥</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="grid-demo">
                                    <form class="layui-form downForm" method='post'>
                                        <input hidden class='downAccessToken'/>
                                        <div class="layui-form-item">
                                            <div class="" style="padding-bottom: 30px;">
                                                <label class="layui-form-label">在线文档：</label>
                                                <a class="layui-btn layui-icon layui-btn-sm layui-icon-file-b" lay-href="dev/pay_doc/pay_api" >支付API接口文档</a>
                                                <a class="layui-btn layui-icon layui-btn-sm layui-icon-file-b" lay-href="dev/pay_doc/agentpay_api" >代付API接口文档</a>
                                            </div>

                                            <div class="" style="padding-bottom: 30px;">
                                                <label class="layui-form-label">demo&doc下载：</label>
                                                <button type="submit" class="layui-btn layui-btn-info layui-btn-sm layui-icon layui-icon-download-circle" ><a id="downUrl" style="color: white" target="_blank"> java/php/asp</a></button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend><span class="layui-badge layui-bg-orange">应用详情</span></legend>
                    <div class="layui-field-box">
                        <table class="layui-table" lay-skin="nob" lay-size="sm">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>应用ID</th>
                                <th>应用名称</th>
                            </tr>
                            </thead>
                            <tbody id="appList">
                            </tbody>
                        </table>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend><span class="layui-badge layui-bg-orange">支付通道</span></legend>
                    <div class="layui-field-box">
                        <table class="layui-table" lay-skin="nob" lay-size="sm">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>支付产品ID</th>
                                <th>支付产品名称</th>
                                <th>费率</th>
                            </tr>
                            </thead>
                            <tbody id="payPassageList">
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </div>
        </div>
        </div>
    </div>
</div>

<script>

    layui.use([], function(){
        var $ = layui.$;
        var tokenParamsName = layui.setter.request.tokenName;
        $('.downAccessToken').attr('name', tokenParamsName).val(layui.data(layui.setter.tableName)[tokenParamsName]);
        $('#pay_doc').attr('href', '/api/paydoc/pay?' + tokenParamsName  + "=" + layui.data(layui.setter.tableName)[tokenParamsName]);
        $('#downUrl').attr('href' , 'https://xxpayvip.oss-cn-beijing.aliyuncs.com/soft/sdk_demo/xxpay4r_demo.zip?t=' + Date.now());
    });

    layui.use(['table','util','admin', 'form'], function() {
        var table = layui.table
            , $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , element = layui.element
            , view = layui.view;

        admin.req({
            type: 'get',
            url:  layui.setter.baseUrl + '/mch/get' //模拟基本信息接口,
            ,error: function(err){
                console.log(err)
            },
            success: function(res){
                if(res.code == 0){
                    $("#mchId").val(res.data.mchId);
                    table.render();
                }
            }
        })

        // 基础信息
        $('body').on('click', '.privateKeyView', function(){
            layer.prompt({formType: 1, title: "请输入谷歌验证码："}, function(value, index, elem){
                layer.close(index);
                //提交表单
                admin.req({
                    type: "POST",
                    url: layui.setter.baseUrl + '/mch/get_key',
                    data: {
                        code: value
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            var index = layer.open({
                                title: "秘钥",
                                content: res.data.privateKey
                            });
                        }
                    }
                });
            });
        })

        // 应用列表
        admin.req({
            type: "POST",
            url: layui.setter.baseUrl + '/app/list',
            data: {
                status: 1
            },
            success: function (res) {
                if (res.code == 0) {
                    if (res.data) {
                        $.each(res.data, function(){
                            let data = this;
                            let appHtml = ` <tr>
                                              <td>${data.appId}</td>
                                              <td>${data.appName}</td>
                                            </tr>`;
                            $("#appList").append(appHtml);
                        })
                    } else {
                        let appHtml = ` <tr>
                                          <td>可在左侧 商户 - 应用管理 添加应用</td>
                                          <td></td>
                                        </tr>`;
                        $("#appList").append(appHtml);
                    }

                }
            }
        });

        // 支付通道
        admin.req({
            type: "POST",
            url: layui.setter.baseUrl + '/mch_pay_passage/list',
            data: {
                status: 1
            },
            success: function (res) {
                if (res.code == 0) {
                    if (res.data.length) {
                        $.each(res.data, function(){
                            let data = this;
                            let payPassageHtml = ` <tr>
                                                      <td>${data.productId}</td>
                                                      <td>${data.productName}</td>
                                                      <td>${data.mchRate}%</td>
                                                    </tr>`;
                            $("#payPassageList").append(payPassageHtml);
                        })
                    } else {
                        let payPassageHtml = ` <tr>
                                                  <td>请联系平台客服分配支付通道</td>
                                                  <td></td>
                                                  <td></td>
                                                </tr>`;
                        $("#payPassageList").append(payPassageHtml);
                    }

                }
            }
        });

    })

</script>




